<template>
<a-row type="flex" justify="center" align="top">
    <a-col :span="8">
        <a-card hoverable style="width: 400px;margin-top: 20%;">
            <template #cover>
                <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
            </template>
            <template #actions>
                <a-button type="link">修改信息</a-button>
                <a-button type="link">修改密码</a-button>
                <a-button type="link">退出登录</a-button>
            </template>
            <a-card-meta :title="username" description="admin">
                <template #avatar>
                    <a-avatar style="color: #f56a00; background-color: #fde3cf" :size="60">{{this.username}}</a-avatar>
                </template>
            </a-card-meta>
        </a-card>
    </a-col>

</a-row>
</template>

  
<script>
import { message } from 'ant-design-vue';
import {
    SettingOutlined,
    EditOutlined,
    EllipsisOutlined
} from '@ant-design/icons-vue';
import {
    defineComponent,ref
} from 'vue';
export default defineComponent({
    components: {
        SettingOutlined,
        EditOutlined,
        EllipsisOutlined,
    },
    
    setup(){
        const username = ref("");
        return{
            username
        }
    },

    created(){
        this.username = window.localStorage.getItem('user')
    }


});
</script>
